<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>GO机网</title>
	<link href="../css/reset-html5.css" rel="stylesheet">
	<link href="../css/mui.min.css" rel="stylesheet">
	<link href="../css/mui.picker.min.css" rel="stylesheet">
	<link href="../css/wx-main.css?20161028_1" rel="stylesheet">
	<script src="../js/jquery-2.2.1.min.js"></script>
	<script src="../plugins/vue/vue.min.js"></script>
	<style>
		body{
			font-size: 14px;
		}
		.price:empty:before{
			content:"0";
		}
		.price:after{
			content:" 元";
		}
		img.mui-media-object.mui-pull-left{
			width:80px;
			height:80px;
			max-width:80px;
			max-height:80px;
		}
		.row{
			display:flex;
			padding:10px 20px;
		}
		.row:not(:first-child){
			background:#fff;
		}
		.row > div{
			flex:1;
		}
		.row .times{
			display:flex;
			align-items:center;
			flex:4;
		}
		.time{
			flex:1;
			border:1px solid #ccc;
			padding:4px 6px;
			height:32px;
			line-height:24px;
			margin:5px;
			background:#fff;
			border-radius:2px;
			font-size:12px;
		}
		.times button{
			margin-left:10px;
		}
		.nickname{
			font-size:16px;
			flex:1;
			align-items:center;
			display:flex;
		}
		.firend_status{
			background:#ccc;
			color:#fff;
			display:block;
			text-align:center;
		}
		.friend_info{
			position:relative;
		}
		.mui-table-view-cell.mui-media>a{
			display:flex;
			align-items:center;
		}
		.mui-media-body{
			flex:1;
		}
		.friend_data{
			position:absolute;
			right:0;
			top:0;
		}
    </style>
</head>
<body id="main">
<header class="text-color1">
        <span class="left-btn text-color2" onclick="location.href='index.html'">首页</span>
    我的机友
</header>

<div>
	<div class="row" style="border-bottom: 1px solid #eee;">
		<div style="line-height:42px;white-space:nowrap;">时间筛选：</div>
		<div class="times">
			<span class="time" v-on:click="selectBeginTime();" v-text="beginTime"></span>
			<span>~</span>
			<span class="time" v-on:click="selectEndTime();" v-text="endTime"></span>
			
			<button v-on:click="get_order_list();">确定</button>
		</div>
	</div>
	
	<div class="row">
		<div><span>机友总数：</span><span v-text="order_list.statistics.allJYNum"></span></div>
		<div><span>取关人数：</span><span v-text="order_list.statistics.notConcernJYNum"></span></div>
	</div>
	<div class="row">
		<div><span>订单总数：</span><span v-text="order_list.statistics.allOrderNum"></span></div>
		<div><span>订单总额：</span><span v-text="order_list.statistics.allPrice"></span></div>
	</div>
	
    <div class="mui-card" v-show="order_list.one.length==0">
        <div class="mui-card-content">
            <div class="mui-card-content-inner">暂无机友数据</div>
        </div>
    </div>

    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="list in order_list.one">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" v-bind:src="list.img_url">
                <div class="mui-media-body">
                	<div class="friend_info">
                		<div class="nickname" v-text="list.nickname"></div>
                		<div class="friend_data">
                			<div class="mui-badge mui-badge-green" v-text="'此人机友数：'+list.count"></div>
                			<div class="firend_status mui-badge " v-if="list.status==0">已取消关注</div>
                		</div>
                		
                	</div>
                    <p>订单总数：{{list.order_info.order_count}}&nbsp;&nbsp;</p>
                    <p>订单总额：<span class="price" v-text="list.order_info.all_price"></span></p>
                    <p class="mui-ellipsis">建立关系时间：<span v-text="list.ctime | getLocalTime"></span> </p>
                </div>
            </a>
        </li>
    </ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/phone.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script>

    Date.prototype.Format = function(format) {
        var date = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S+": this.getMilliseconds()
        };
        if (/(y+)/i.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in date) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1
                        ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
            }
        }
        return format;
    }
	
	var timePicker = new mui.DtPicker({type:'date'});

    //将UTC格式转为正常的日期格式输出
    function getUTCTime(second) {
        var d = new Date();

        //转换毫秒
        d.setTime(second * 1000);
        return d.Format("yyyy-MM-dd hh:mm");
    }


    Vue.filter('getLocalTime', function (value) {
        return getUTCTime(value)
    });


    var vue = new Vue({
        el:"#main",
        data:{
            order_list:'',
            beginTime:"",
            endTime:""
        },
        methods:{
            'get_order_list':function(){
                var that = this;
                $.post('../index/index.php?m=Home&c=Index&a=getTicketList',{
                	starttime:that.beginTime,
                	endtime:that.endTime
                },function(res){
                    if(res.code==200){
                        that.order_list = res.data
                    }else if(res.code==0){
                        login();
                    }
                },'json');
            },
            'go_order_info':function(id){
                location.href = "order_info.html?order_id="+id;
            },
            selectBeginTime:function(){
                var that = this;
	        	timePicker.show(function (item) {
					that.beginTime = item.value;
				});
	        },
	        selectEndTime:function(){
                var that = this;
	        	timePicker.show(function (item) {
					that.endTime = item.value;
				});
	        },
	        search:function(){
	        	
	        }
        },
        ready:function(){
            this.get_order_list();
        }
    });

    Vue.filter('getStatus', function (value) {
        return getStatus(value)
    });

    function getStatus(value){
        var status = '';
        switch(parseInt(value))
        {
            case 1:
                status = '已下单';
                break;
            case 2:
                status = '已下单';
                break;
            case 3:
                status = '待维修';
                break;
            case 4:
                status = '待付款';
                break;
            case 5:
                status = '待评价';
                break;
            case 6:
                status = '已完成';
                break;
        }
        return status;
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return '';
    }
</script>
</html>